<template>
  <div class="form">
    <div class="title">请输入小演员编号</div>
    <div class="group" v-if="route.query.role == 'photographer'">
      <label>
        <input
          type="radio"
          name="chcekin_stage"
          value="1"
          checked
          @change="radioChange"
        />
        <span>初试</span>
      </label>
      <label>
        <input
          type="radio"
          name="chcekin_stage"
          value="2"
          @change="radioChange"
        />
        <span>复试</span>
      </label>
    </div>
    <div class="group">
      <input
        type="number"
        placeholder="请输入小演员编号"
        v-model="state.checkin_no"
      />
    </div>
    <button class="submit" @click="submit">确定</button>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import ajax from "../util/http";
import { reactive, getCurrentInstance, computed } from "vue";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

const state = reactive({
  checkin_no: "",
  checkin_stage: 1,
});

const radioChange = (e) => {
  state.checkin_stage = Number(e.target.value);
};

let path = "/";
switch (route.query.role) {
  case "first":
    path = "/first/comment";
    state.checkin_stage = 1;
    break;
  case "second":
    path = "/second/comment";
    state.checkin_stage = 2;
    break;
  case "host":
    path = "/";
    break;
  case "photographer":
    path = "/photographer";
    break;
  default:
    break;
}

const checkin_no_str = computed(() => {
  if (Number(state.checkin_no) < 10) {
    return "00" + state.checkin_no.toString();
  }
  if (Number(state.checkin_no) < 100 && Number(state.checkin_no) >= 10) {
    return "0" + state.checkin_no.toString();
  }
  return state.checkin_no.toString();
});
const submit = () => {
  if (Number(state.checkin_no)) {
    ajax
      .post("/star/scene/oper_table", {
        token: JSON.parse(localStorage.getItem("userinfo")).token,
        checkin_no: checkin_no_str.value,
        checkin_stage: state.checkin_stage,
      })
      .then((res) => {
        if (res.code == 1) {
          if (["first", "second"].includes(route.query.role)) {
            router.push({
              path: path,
              query: {
                checkin_no: checkin_no_str.value,
              },
            });
          }
          if (route.query.role == "photographer") {
            router.push({
              path: path,
              query: {
                checkin_no: checkin_no_str.value,
                checkin_stage: state.checkin_stage,
              },
            });
          }
        }
      });
  } else {
    proxy.$message({ content: "请输入小演员编号" });
  }
};
</script>